@body-bgcolor: #013461;
@boder-color: #00adf4;
@boder-click-color: #01E9E7;
/* 蓝色按钮悬浮状态背景色 */
@blue-btn-hover-bg: #0085dc;
@model-title-color: #00eaff;
/* 下拉选中颜色*/
@option-bgcolor: #01315b;
@option-select-bgcolor: #007ff1;
/* 查询按钮的绿色 */
@btn-search-color: #64ffa9;
/* 高级查询按钮的蓝色 */
@btn-upsearch-color: #40caff;
/* 指令等文字的颜色 font-size：14px*/
@instructions-color: #00fff0;
html, body {
  color: #fff;
  width: 1920px;
  height: 1080px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-color: @body-bgcolor;
}
body {
  background-image: url(../img/bg.png);
}
::-webkit-input-placeholder {
  color: #fff;
  padding-left: 4px;
}
::-webkit-scrollbar-thumb {
  background-clip: padding-box;
  min-height: 28px;
  position: relative;
  display: block;
  width: 0;
  height: 0;
  cursor: pointer;
  border-radius: inherit;
  background-color: rgba(144,147,153,.3);
  -webkit-transition: .3s background-color;
  transition: .3s background-color;
}
::-webkit-scrollbar-thumb:hover {
  background-color: rgba(144,147,153,.3);
}
::-webkit-scrollbar-track-piece {
  background: none;
}
.el-select-dropdown__wrap.el-scrollbar__wrap {
  background-color: @body-bgcolor;
}
/*清除浮动代码*/
.clearfloat:after{
  display:block;
  clear:both;
  content:"";
  visibility:hidden;
  height:0
}
.clearfloat{
  zoom:1
}
/* 文字过长 */
.longtxt {
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
/* flex水平居中 */
.box-center {
  display: flex;
  justify-content: center;
}
.ps-rel {
  position: relative;
}
.pointer {
  cursor: pointer
}
.jus-center {
  display: flex;
  justify-content: center;
}
/* 图片checkbox样式 */
.key-select-bg {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
}

.checkbox-label {
  /*未选中时*/
  /*隐藏掉我们模型的checkbox*/
  .input_agreement_protocol {
    appearance: none;
    -webkit-appearance: none;
    outline: none;
    display: none;
  }
  .input_agreement_protocol+span {
    width: 20px;
    height: 20px;
    display: inline-block;
    background: url(../img/icon_checkbox.png) no-repeat;
    background-position-x: 0px;
    background-position-y: -25px;
    position: relative;
    top: 6px;
  }
  .checkbox-text {
    margin-left: 4px;
  }
  /*选中checkbox时,修改背景图片的位置*/
  .input_agreement_protocol:checked+span {
    background-position: 0 0px
  }
}

/**/
.btns {
  margin-top: 10px;
}
.btn.btn-default.btn-self-search,
.btn.btn-default.btn-wpf-dialog-close,
.btn.btn-default.btn-self-Upsearch {
  height: 28px;
  min-width: 58px;
  line-height: 28px;
  background: none;
  color: @btn-search-color;
  padding: 0 10px;
  border: none;
  outline: none;
  background: url(../img/green_btn.png) no-repeat;
  -webkit-background-size: 100% 100%;
  background-size: 100% 100%;
  margin-right: 20px;
}
.btn.btn-default.btn-wpf-dialog-close,
.btn.btn-default.btn-self-Upsearch {
  background-image: url(../img/blue_btn.png);
  color: @btn-upsearch-color;
}
.btn.btn-default.btn-wpf-dialog-close {
  color: #fff;
}
.btn:hover {
  box-shadow: 0 0 0 20px rgba(0, 0, 0, 0.2) inset;
}
.btn.btn-default.btn-self-search:hover {
  background-color: #00bd49;
  color: #fff;
}
.btn.btn-default.btn-self-Upsearch:hover {
  background-color: @blue-btn-hover-bg;
  color: #fff;
}
#app {
  width: 100%;
  height: 100%;
}
.sentiment-content {
  display: flex;
  height: 100%;
  .flex-left {
    flex: 0 0 67.3%;
    margin-right: 3.6%;
  }
  .flex-right {
    flex: 0 0 28.1%;
  }
  /*表单*/
  .table-ctrl-body {
    .table-default {
      background-color: #00a6f0;
    }
    .table-header {
      margin-top: 0;
    }
  }
}
.flex-left {
  .search-detail-wrap {
    width: 100%;
    height: 84.8%;
    margin-left: 1%;
    /* 状态切换标签样式 */
    .status-switch-btn {
      width: 100%;
      height: 8.8%;
      display: flex;
      align-items: center;
      .status-btn {
        border: none;
        .status-btn-item {
          padding: 4px 25px;
          float: left;
          font-size: 14px;
          cursor: pointer;
          background: url("../img/status_center.png") no-repeat;
          background-size: 100% 100%;
          &>span {
            margin-left: 4px;
          }
        }
        .status-btn-item:hover {
          color: @boder-click-color;
          background: url("../img/status_center_hover.png") no-repeat;
          background-size: 100% 100%;
        }
        .status-btn-item.status-btn-center {
          color: @boder-click-color;
          background: url("../img/status_center_hover.png") no-repeat;
          background-size: 100% 100%;
        }
        .status-btn-item:first-child {
          background: url("../img/status_left.png") no-repeat;
          background-size: 100% 100%;
        }
        .status-btn-item:first-child:hover {
          background: url("../img/status_left_hover.png") no-repeat;
          background-size: 100% 100%;
        }
        .status-btn-item.status-btn-first {
          color: @boder-click-color;
          background: url("../img/status_left_hover.png") no-repeat;
          background-size: 100% 100%;
        }
        .status-btn-item:last-child {
          background: url("../img/status_right.png") no-repeat;
          background-size: 100% 100%;
        }
        .status-btn-item:last-child:hover {
          background: url("../img/status_right_hover.png") no-repeat;
          background-size: 100% 100%;
        }
        .status-btn-item.status-btn-last {
          color: @boder-click-color;
          background: url("../img/status_right_hover.png") no-repeat;
          background-size: 100% 100%;
        }
      }
      .status-right-btn {
        position: absolute;
        right: 10px;
        .status-right-picbtn {
          width: 22px;
          height: 22px;
          margin-top: 6px;
          margin-right: 14px;
          background: url("../img/status_right_picbtn.png") no-repeat;
          background-size: 100% 100%;
          &:hover {
            background: url("../img/status_right_picbtn_check.png") no-repeat;
          }
        }
        .status-right-listbtn {
          width: 22px;
          height: 22px;
          margin-top: 6px;
          margin-right: 40px;
          background: url("../img/status_right_listbtn.png") no-repeat;
          background-size: 100% 100%;
          &:hover {
            background: url("../img/status_right_listbtn_check.png") no-repeat;
          }
        }
        .status-right-addbtn {
          width: 99px;
          height: 35px;
          text-align: center;
          line-height: 35px;
          color:@btn-upsearch-color;
          background: url("../img/status_right_addbtn.png") no-repeat;
          background-size: 100% 100%;
          &:hover {
            background-color: @blue-btn-hover-bg;
            color: #fff;
          }
        }
        .status-pic {
          background: url("../img/status_right_picbtn_check.png") no-repeat;
        }
        .status-list {
          background: url("../img/status_right_listbtn_check.png") no-repeat;
        }
      }

    }
    .status-switch-detail {
      width: 100%;
      height: 87%;
    }
    .status-switch-pagination {
      width: 100%;
      height: 3.3%;
      background: blue;
    }
  }
}
.normal-search {
  width: 100%;
  height: 15.2%;
  margin-left: 1%;
  border-bottom: 1px dotted #0584F7;
  .normal-search-row {
    width: 100%;
    margin-bottom: 20px;
    .search-input {
      width: 54%;
      height: 34px;
      background: none;
      color: #fff;
      outline: none;
      border: 1px dotted #0584F7;
      border-radius: 20px;
      text-indent: 15px;
    }
  }
  .flex-four {
    display: flex;
    height: 30px;
    text-align: left;
    .search-four {
      flex: 0 0 25%;
      .search-four-title {
        font-size: 14px;
        line-height: 30px;
        margin-bottom: 0;
      }
    }
  }
}
/* 选中后的样式 */
.select-source {
  .mut-select {
    .el-tag:nth-of-type(1){
      width: 70%;
      overflow: hidden;
      .el-select__tags-text {
        display: inline-block;
        width: calc(100% - 13px);
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
      }
    }
    .el-select .el-tag {
      background-color: transparent;
      .el-select__tags-text {
        color: #fff;
      }
      .el-tag__close.el-icon-close {
        background: @boder-color;
        top: -7px;
        right: -22px;
      }
    }
  }
}
/* 选中后的样式 end */
.search-color {
  color: #00d8ff;
}
.send-time {
  font-size: 14px;
  line-height: 34px;
}
.time-item {
  width: 220px;
  float: left;
  border: 1px dotted @boder-color;
  .input-time-show {
    color: #fff;
    background: none;
  }
}

.span-time-icon {
  color: @boder-color;
  border: none;
  border-left: 1px solid @boder-color;
  background: none;
}
.glyphicon-calendar:before {
  content: "\1F4C5";
}

.mut-select {
  .el-select .el-input__inner {
    background: none;
    border: 1px dotted @boder-color;
    color: #fff;
    height: 30px;
    padding-left: 0;
    width: 96%;
  }
  .el-select:hover .el-input__inner {
    border: 1px dotted @boder-color;
  }
  .el-input__suffix {
    right: 15px;
  }
  .el-select .el-input .el-select__caret {
    color: #0584F7;
  }
  .el-input__icon {
    line-height: 30px;
  }
}

.el-select-dropdown.el-popper.is-multiple {
  border: 1px dotted @option-bgcolor;
  background: @option-bgcolor;
  ::-webkit-scrollbar-track-piece{
    background: @body-bgcolor;
  }
}
.el-popper[x-placement^=top] .popper__arrow {
  display: none;
}

.el-select-dropdown__list {
  background: @option-bgcolor;
  .el-select-dropdown__item {
    color: #fff;
  }
  .el-select-dropdown__item.hover, .el-select-dropdown__item:hover {
    background-color:@option-select-bgcolor;
    color: #fff;
    font-weight: 400;
  }
}
.el-select-dropdown.is-multiple .el-scrollbar .el-scrollbar__view.el-select-dropdown__list .el-select-dropdown__item.selected {
  background-color:@option-select-bgcolor;
  color: #fff;
  font-weight: 400;
}

.el-popper[x-placement^=bottom] .popper__arrow {
  display: none;
  border-bottom-color: @option-bgcolor !important;
}

.el-popper[x-placement^=bottom] .popper__arrow::after{
  display: none;
  border-bottom-color: @option-bgcolor !important;
}

input ::-webkit-input-placeholder{
  color: #fff;
  font-size: 14px;
  line-height: 30px;
}
/* 时间选择 */
.dropdown-menu {
  background-color: @boder-color;
}
.datetimepicker {
  padding: 0;
}
.datetimepicker>div {
  background: #013560;
}
.datetimepicker-dropdown-bottom-right:before {
  display: none;
}
[class*=" datetimepicker-dropdown"]:after {
  display: none;
  border-bottom: 6px solid @boder-color;
}
.datetimepicker thead tr:first-child th:hover, .datetimepicker tfoot th:hover {
  background-color: #039;
  background-image: linear-gradient(to bottom,#08c,#04c);
  background-repeat: repeat-x;
  border-color: rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25);
  color: #fff;
  text-shadow: 0 -1px 0 rgba(0,0,0,0.25);
}

.datetimepicker table tr td.day:hover, .datetimepicker table tr td span:hover {
  background-color: #039;
  background-image: linear-gradient(to bottom,#08c,#04c);
  background-repeat: repeat-x;
  border-color: rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25);
  color: #fff;
  text-shadow: 0 -1px 0 rgba(0,0,0,0.25);
}
/*今日舆情总数 通报榜 */
.side-echarts {
  height: 100%;
}
.sentiment-total {
  height: 28.3%;
}
.bulletinBoard {
  height: 28.3%;
  margin: 3.1% 0 2.9% 0;
}
#div-right1,
#div-right2 {
  background-image: url(../img/div-right-12.png);
  background-repeat: no-repeat;
  width: 540px;
}
#div-right1 {
  height: 100%;
}
#div-right2 {
  height: 100%;
}


/*舆情分类统计*/

#div-right3 {
  background-image: url(../img/div-right-3.png);
  background-repeat: no-repeat;
  height: 38.4%;
  width: 540px;
}

.div-right-title {
  color: #00ffff;
  padding: 5px 20px;
  text-align: left;
}

.div-right-title .div-right-title-box {
  background: #00ffff;
  width: 9px;
  height: 22px;
  float: left;
  margin-right: 20px;
}




/*本周,本月*/

.div-right-time-tabs {
  margin-right: 50px;
  border: 1px #44A9DB solid;
  color: #FFFFFF;
  font-size: 0.8em;
  border-radius: 5px;
}

.div-right-time-tab {
  padding: 5px;
  z-index: 2;
}


/*选中的状态*/
.div-right-time-tabs .tab-checked {
  border: 1px #44A9DB solid;
  background-color: #0A71AF;
}

.div-right-content {
  height: 100%;
  .content-detail {
    margin-top: 10px;
    display: flex;
    height: 58%;
    overflow: hidden;
    .content-left-ul {
      flex: 0 0 50%;
    }
    .content-right-ul {
      flex-grow: 1;
    }
    .tab-ul {
      list-style: none;
      color: white;
      margin-top: 5px
    }
    .tab-ul li {
      width: 100%;
      display: flex;
      text-align: right;
      line-height: 20px;
      .station-index {
        width: 16px;
        height: 16px;
        font-size: 12px;
        text-align: center;
        background: #01a6f0;
        border-radius: 50%;
        display: inline-block;
      }
      .station-name {
        flex: 0 0 52%;
        text-align: left;
        margin-left: 17%
      }
      .station-num {
        flex-grow: 1;
        margin-right: 12%;
      }
    }

  }
}


/*通报榜*/

.div-right2-content-tab {
  color: #FFFFFF;
  /*font-size: 1.1em;*/
  text-align: center;
}

.div-right2-content-tab span {
  margin: 0 1em;
}

.div-right2-content-tab .tab-checked {
  color: #00ffff;
  border-bottom: 1px #00ffff solid;
}


.sentiment-total {
  .sentiment-total-num {
    font-size: 36px;
    color: #00ffff;
    margin-left: 50px;
    font-family: 'longzhoufeng';
  }
  .sentiment-total-text {
    font-size: 20px;
    color: #00ffff;
  }
  .sentiment-total-change-text {
    color: #00ffff;
    margin-left: 4px;
  }
  .sentiment-total-up {
    color: #ff1414;
    &:after {
      content: '↑';
      vertical-align: text-bottom;
      margin-left: 4px;
    }
  }
  .sentiment-total-down {
    color: #00bd49;
    &:after {
      content: '↓';
      vertical-align: text-bottom;
      margin-left: 4px;
    }
  }
}

.message-dialog {
  .dialog-ctrl{
    position: fixed;
    left: 50%;
    width: 300px;
    height:  auto;
    background-color: rgba(46,56,70,0.85);
    color: #fff;
    padding: 30px;
    margin-left: -150px;
    top: 60px;
    border-radius: 4px;
    z-index: 999;
  }
  .dialog-ctrl .dialog-content{
    text-align: center;
  }
  .fadeInDown,.fadeOutUp{
    animation-duration: .500s;
  }
}
/* 弹窗 */
@model-weight:1051px;
@model-height:910px;
.model-ctrl-body .model-ctrl-main.sentiment-dialog {
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  padding: 0;
  width: 1051px;
  height: @model-height;
  background-color: transparent;
  border: none;
  background: url("../img/model-bg.png") no-repeat;
  background-size: 100% 100%;
  .model-title {
    line-height: 48px;
    color: @model-title-color;
    text-align: center;
    font-size: 20px;
    margin-top: 4px
  }

  @model-center-top: 8px;
  @model-center-height:836px;
  .model-center {
    margin-top: @model-center-top;
    height:  @model-center-height;
    padding: 0 26px;
    overflow: hidden;
    overflow-y: auto;
    .model-center-title {
      font-size: 16px;
      color: #00ff86;
      line-height: 20px;
      padding-left: 30px;
      margin: 16px 0 25px 0;
      &.first-title {
        height: 20px;
        background: url(../img/model-title-first.png) no-repeat;
      }
      &.two-title {
        height: 20px;
        background: url(../img/model-title-two.png) no-repeat;
      }
    }
    .modal-ctrl-content {
      @model-flex-key: 126px;
      .model-row {
        padding: 0 20px;
        .mut-select {
          width: 100%;
          .el-select .el-input__inner {
            height: 34px;
          }
        }
        .two-dimensional-btn, .map-location-btn {
          width: 88px;
          height: 24px;
          margin: 5px 0 0 10px;
          line-height: 22px;
          text-align: center;
          color: #ffad1e;
          border: 1px solid #ffad1e;
          border-radius: 2px;
          background: none;
        }
        .two-dimensional-btn {
          color: #1ad0f8;
          border: 1px solid #1ad0f8;
          .two-dimensional-content {
            position: absolute;
            width: 237px;
            height: 220px;
            top: -80px;
            left: -240px;
            background: url(../img/two_dimensional.png) no-repeat;
            background-size: 100% 100%;
            padding: 16px 18px 0 0;
          }
        }
      }
      .model-odd-row, .model-even-row {
        position: relative;
        width: 100%;
        margin-bottom: 15px;
        display: flex;
        .model-form-key {
          flex: 0 0 @model-flex-key;
          line-height: 34px;
          height: 36px;
          font-size: 14px;
          text-align: right;
        }
        .model-text {
          flex-grow: 1;
          height: 34px;
          background: @body-bgcolor;
          border: 1px dotted @boder-color;
          .select-resource-body {
            display: flex;
            width: 100%;
            height: 220px;
            top: 33px;
            border: none;
            background-color: @option-bgcolor;
            ul {
              flex: 0 0 22%;
              height: 100%;
              li:hover {
                background-color: @option-select-bgcolor;
              }
              li.active {
                background-color: transparent;
                &:after {
                  position: absolute;
                  right: 20px;
                  font-family: element-icons;
                  content: "\E611";
                  font-size: 12px;
                  font-weight: 700;
                  -webkit-font-smoothing: antialiased;
                }
              }
              li.now {
                background-color: @option-select-bgcolor;
              }
            }
            .select-key-detial {
              padding: 10px;
              ul {
                flex: 0 1 0;
                display: flex;
                flex-wrap: wrap;
                li {
                  margin-right: 10px;
                }
              }
            }
          }
          &.uplode-wrap {
            height: 100%;
            border:none;
            background-color: transparent;
            .alert-msg {
              margin-bottom: 6px;
              line-height: 34px;
              color: #008aff;
            }
            .uplode-detail {
              .uplode-btn {
                width: 50px;
                height: 50px;
                margin-right: 34px;
                background: url("../img/uplode_btn.png") center no-repeat;
                border: 1px dotted @boder-color;
              }
              .uplode-item {
                display: flex;
                .uplode-file-msg {
                  flex: 1;
                  margin-left: 10px;
                  .uplode-file-name {
                    position: absolute;
                    top: 0;
                  }
                  .uplode-file-btn-wrap {
                    position: absolute;
                    bottom: 0;
                    color: #1ad0f8;
                    .uplode-file-cancel {
                      margin-left: 10px;
                    }
                  }
                }
              }
            }
          }
        }
        .model-textarea {
          height: 100px;
          resize:none;
        }
        .classify-ul {
          display: flex;
          flex-wrap: wrap;
          padding-top: 4px;
          .classify-li {
            flex: 0 0 33.33%;
          }
        }
      }
      .model-even-row {
        width: 50%;
        float: left;
        &.model-even-row-right {
          justify-content: flex-end;
        }
        .model-form-key {
          flex: 0 0 @model-flex-key;
        }
        .model-text {
          flex: 0 0 58%;
        }
        .model-select {
          flex: 0 0 58%;
          &.mut-select {
            .el-select {
              width: 100%;
              .el-input__inner {
                width: 100%;
                background-color: @body-bgcolor;
              }
            }
          }
        }
      }
    }
  }
}
.model-ctrl-body .model-ctrl-main.map-ctrl {
  z-index: 3;
  background-color: @body-bgcolor;
  border: 1px dotted @boder-color;
}
.el-select-dropdown.el-popper[x-placement^=bottom],
.el-popper[x-placement^=top] {
  border: none
}

.must {
  position: relative;
  padding-right: 10px;
  &:after {
  content: "*";
  position: absolute;
  right: 8px;
  line-height: 45px;
  font-size: 20px;
  color: #ff1414;
  }
}
.map-dialog {
  position: fixed;
  width: 70%;
  height: 70%;
}
.pic-box-wrap {
  width: 402px;
  height: 196px;
  padding: 10px 10px 8px 10px;
  background: url("../img/pic_box_bg.png") no-repeat;
  .pic-box-up {
    width: 100%;
    height: 161px;
    margin-bottom: 1px;
    .pic-box-status {
      position: absolute;
      top: 0;
      right: 0;
    }
    .title {
      width: 88%;
      margin-bottom: 10px;
      font-size: 16px;
    }
    .key-text {
      display: flex;
      li {
        height: 100%;
        border: 1px solid @boder-color;
        border-radius: 4px;
        padding: 0 6px;
        font-size: 12px;
        line-height: 16px;
        margin-right: 10px;
      }
    }
  }
  .pic-box-down {
    width: 100%;
    height: 28px;
  }
}
.eleMap .esri-icon-plus:before,
.eleMap .esri-icon-minus:before,
.eleMap .esri-icon-blank-map-pin:before,
.eleMap .esri-icon-polygon:before,
.eleMap .esri-icon-polyline:before,
.eleMap .esri-icon-trash:before{
  content: '';
  background-size: 100% 100%;
  display: inline-block;
  width: 30px;
  height: 30px;
}
.eleMap {
  .esri-icon-plus:before {
    background: url("../img/esri_icon_plus.png") no-repeat;
  }
  .esri-icon-minus:before {
    background: url("../img/esri_icon_minus.png") no-repeat;
  }
  .esri-icon-blank-map-pin:before {
    background: url("../img/esri_icon_blank_map_pin.png") no-repeat;
  }
  .esri-icon-polygon:before {
    background: url("../img/esri_icon_polygon.png") no-repeat;
  }
  .esri-icon-polyline:before {
    background: url("../img/esri_icon_polyline.png") no-repeat;
  }
  .esri-icon-trash:before {
    background: url("../img/esri_icon_trash.png") no-repeat;
  }
}


